import React from 'react'
import { g, sty } from '../../tool'
import AlphaButton from './AlphaButton'
export default class Video extends React.PureComponent {
    videoId = ''.random(16)
    static defaultProps = {
        src: '',
        play: false,
        playIcon: null,
        pauseIcon: null,
        closeIcon: null,
        closeEvent: () => { }
    }
    constructor(props) {
        super(props)
        this.state = {
            isPlaying: false,
            isClose: false,
        }
    }
    render() {
        if (this.state.isClose === true) {
            return null
        }
        let { src, playIcon, pauseIcon, closeIcon, play, closeEvent, ...rest } = this.props
        let nowIcon = this.state.isPlaying ? pauseIcon : playIcon
        // src = 'video/hpvTop10.mp4'
        return (
            <div style={{ width: g.w, height: g.h, backgroundColor: '#000', zIndex: 9998, ...sty.full() }} {...rest}>
                <video id={this.videoId} width={g.w} height={g.h}
                    style={{ WebkitAppearance: 'none', appearance: 'none' }}>
                    <source src={src} type='video/mp4' />
                    您的浏览器不支持Video标签,请使用现代浏览器
                </video>
                <div style={{ ...sty.box('h'), ...sty.bottomBar(), backgroundColor: 'rgba(255,255,255,0.1)', height: g.px(130), ...sty.font(g.px(30), 300), zIndex: 9999 }}>
                    <div style={{ width: g.px(250) }}></div>
                    <AlphaButton style={{ ...sty.img(nowIcon, g.px(44), g.px(44)) }} onClick={this.handlePlay}>{nowIcon ? null : 'play'}</AlphaButton>
                    <div style={{ width: g.px(250) }}></div>
                    <AlphaButton style={{ ...sty.img(closeIcon, g.px(30), g.px(30)) }} onClick={this.handleClose}>{closeIcon? null:'close'}</AlphaButton>
                </div>
            </div>
        )
    }
    componentDidMount() {
        if (this.props.play) {
            this.handlePlay()
        }
    }
    handlePlay = (e) => {
        let video = document.getElementById(this.videoId)
        if (video.paused) {
            video.play()
            this.setState({
                isPlaying: true
            })
        } else {
            video.pause()
            this.setState({
                isPlaying: false
            })
        }
    }
    handleClose = () => {
        this.props.closeEvent()
    }
}